<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.dragndrop - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

#ex1 {
	background: #eee;
	border: 1px dashed #ccc;
	width: 660px;
	text-align: center;
}

#dropped {
	width: 660px;
	padding-top: 1em;
	padding-bottom: 1em;
}

#ex1 h1 {
	color: #ccc;
	margin: 60px 0;
}

#ex2 {
	display: block;
	padding: 1em;
	background: #cce;
	text-decoration: none;
	color: #333 !important;
	width: 360px;
}

</style>

<script>

$(document).ready(function () {

	$('#ex1').ajp$dragndrop({
		getUploadUrl: function (file, el) { return './backend/?name=' + encodeURIComponent(file.fileName) },
		onload: function (file, el, xhr) {
			if ($('#dropped b').length <= 0)
				$('#dropped').html('<b>List of uploaded files:</b><br/>')
			$('#dropped').append(xhr.responseText)
		}
	})

	$('#ex2').data('downloadurl',
		$('#ex2').data('downloadurl')
		+ (/\/$/.test(window.location.href) ? window.location.href : window.location.href + '/')
		+ $('#ex2').attr('href')
	).ajp$dragout()
})

</script>

</head>

<body>

	<div id="ex1">
		<h1>Drag and drop files here...</h1>
	</div>

	<div id="dropped"></div>

	
	<a id="ex2" href="dragout.html" data-downloadurl="text/plaint:text.txt:">
		Drag me to desktop to download file text.txt
	</a>
</body>